@(openTokArchive : OpenTokArchive)
<html lang="@lang().code()">
  <head>
    <title>title</title>
    
    <!-- Le meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Nexus - an online counsellor">
    <meta name="author" content="The Nexus Team">
    
    <!-- Le scripts -->
<!-- <script src="@routes.Assets.at("js/bootstrap.min.js")"></script> -->
	<script src="@routes.Application.jsRoutes" defer="defer"></script>

	<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
		
	<link rel="stylesheet" media="screen" href='@routes.Assets.at("stylesheets/main.css")'>
	
	<script src="http://static.opentok.com/v0.91/js/TB.min.js" type="text/javascript" charset="utf-8"></script>

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

  <script type="text/javascript" charset="utf-8">
	var openTokData;
	var session;
	var loadedArchive;
	var archiveId=  '@(openTokArchive.archiveId)';
	function startSession(){
		jQuery.ajax({
			url: 'startSession?eventId='+@(openTokArchive.event.id),
			type: 'GET',
			success: function (data){
				openTokData = data;
				if(openTokData != null && openTokData != 'undefined'){
					//document.write(sessionData.sessionId);
					 session = TB.initSession(openTokData.sessionId);			
				     session.addEventListener('sessionConnected', sessionConnectedHandler);
				     session.addEventListener("archiveLoaded", archiveLoadedHandler);
				     TB.addEventListener("exception", exceptionHandler);
				     TB.setLogLevel(TB.DEBUG);
				     session.connect(openTokData.apiKey, openTokData.moderatorToken);
				     
				}
			}
		});		
	}
	
	function sessionConnectedHandler(event){
			 var publishProps = {height:240, width:320};
			 session.loadArchive(archiveId);
 	}

	
	function archiveLoadedHandler(event) {
	    session.addEventListener('streamCreated', streamCreatedHandler);
	    session.addEventListener('playbackStopped', playbackStoppedHandler);
	     loadedArchive = event.archives[0];
	     loadedArchive.startPlayback();
	    /*   var playBtn = document.getElementById("playStopBtn");
	         playBtn.setAttribute('disabled', 'disabled'); */
	    
	}
	
	function playbackStoppedHandler(event) {
	   /*  var playBtn = document.getElementById("playStopBtn");
	    playBtn.setAttribute('disabled', ''); */
	}   
	
	function disconnectSession(){
		session.disconnect();
	}
	function subscribeToStreams(streams) {
		for (var i = 0; i < streams.length; i++) {
	        if (streams[i].type == "archive") {
	            var div = document.createElement('div');
	            div.setAttribute('id', 'stream' + streams[i].streamId);
	            document.getElementById('subscriberDiv').appendChild(div);
	 
	            session.subscribe(streams[i], div.id);
	        }
		}
	    }
	function streamCreatedHandler(event) {
	      // Subscribe to any new streams that are created
	     subscribeToStreams(event.streams);
	    }
	function exceptionHandler(event){
		 TB.log(event.message);
		alert('in exception event');
	}
	
	</script>
</head>
@main(Messages("playauthenticate.navigation.startsession"), "Start Session") {
    
<!--     <h1>@Messages("playauthenticate.navigation.startsession")</h1> -->
      <div class="row">
        <div class="span4">
        	<h2>Archived Videos</h2>
          <p>You are currently viewing archived video of event @(openTokArchive.eventName)</p>
          <p><a id="startBtn" class="btn" href="#" onclick="startSession()">view &raquo;</a></p>
          <a id="recordBtn"></a> 
        </div>
		</div>
		
<div id="publisherDiv">
</div>    
<div id="subscriberDiv">
</div>
}